<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>体检记录</h2>
          <el-form :inline="true" :model="searchForm" ref="searchFormRef">
            <el-form-item label="体检时间" prop="dateRange">
              <div style="display: flex; gap: 10px;">
                <el-date-picker
                    v-model="searchForm.startTime"
                    type="date"
                    placeholder="开始日期"
                    value-format="YYYY-MM-DD"
                    :max-date="searchForm.endTime"
                />
                <span style="align-self: center">至</span>
                <el-date-picker
                    v-model="searchForm.endTime"
                    type="date"
                    placeholder="结束日期"
                    value-format="YYYY-MM-DD"
                    :min-date="searchForm.startTime"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <el-table :data="checkupData" border stripe v-loading="loading" element-loading-text="数据加载中..." element-loading-background="rgba(255, 255, 255, 0.8)">

        <el-table-column prop="checkupDate" label="体检日期" width="180" align="center"></el-table-column>
        <el-table-column
            prop="height"
            label="身高(cm)"
            width="100"
            align="center"
        >
          <template #default="{row}">
            {{ row.height || '-' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="weight"
            label="体重(kg)"
            width="100"
            align="center"
        >
          <template #default="{row}">
            {{ row.weight || '-' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="bloodPressure"
            label="血压(mmHg)"
            width="130"
            align="center"
        >
          <template #default="{row}">
            <el-tag v-if="row.bloodPressure" type="info">
              {{ row.bloodPressure }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="heartRate"
            label="心率(bpm)"
            width="110"
            align="center"
        >
          <template #default="{row}">
            <div :class="{'warning-text': row.heartRate > 100}">
              {{ row.heartRate || '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="bloodSugar"
            label="血糖(mmol/L)"
            width="130"
            align="center"
        >
          <template #default="{row}">
            <div :class="{
              'warning-text': row.bloodSugar > 6.1 || row.bloodSugar < 3.9
            }">
              {{ row.bloodSugar?.toFixed(1) || '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="liverFunction"
            label="肝功能"
            width="100"
            align="center"
        >
          <template #default="{row}">
            <el-tag :type="row.liverFunction === '异常' ? 'danger' : 'success'">
              {{ row.liverFunction || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="doctorComment"
            label="医生总评"
            min-width="180"
        >
          <template #default="{row}">
            <div style="white-space: pre-wrap;">{{ row.doctorComment || '暂无总评' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="{row}">
            <el-button type="primary" link @click="showDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.pageNum"
            background
            layout="total,sizes, prev, pager, next"
            :total="pageInfo.total">
        </el-pagination>
      </div>

      <el-drawer
        v-model="detailVisible"
        title="体检详情"
        size="50%"
      >
        <div class="drawer-content">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="体检日期">
              {{ dayjs(currentDetail.checkupDate).format('YYYY-MM-DD HH:mm') }}
            </el-descriptions-item>
            <el-descriptions-item label="记录护工">
              {{ currentDetail.staffName || '未知' }}
            </el-descriptions-item>
          </el-descriptions>

          <el-card class="section-card">
            <template #header>
              <div class="card-sub-header">基础体征</div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <label>身高：</label>
                  <span>{{ currentDetail.height || '-' }} cm</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>体重：</label>
                  <span>{{ currentDetail.weight || '-' }} kg</span>
                </div>
              </el-col>

              <el-col :span="8">
                <div class="detail-item">
                  <label>血压：</label>
                  <span>{{ currentDetail.bloodPressure || '-' }} mmHg</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>心率：</label>
                  <span>{{ currentDetail.heartRate || '-' }} bpm</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="section-card">
            <template #header>
              <div class="card-sub-header">血液检查</div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <label>血糖：</label>
                  <span>{{ currentDetail.bloodSugar?.toFixed(1) || '-' }} mmol/L</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>胆固醇：</label>
                  <span>{{ currentDetail.cholesterol || '-' }} mmol/L</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>甘油三酯：</label>
                  <span>{{ currentDetail.triglyceride || '-' }} mmol/L</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>血红蛋白：</label>
                  <span>{{ currentDetail.hemoglobin || '-' }} g/L</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="section-card">
            <template #header>
              <div class="card-sub-header">器官功能</div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <label>肝功能：</label>
                  <el-tag :type="currentDetail.liverFunction === '异常' ? 'danger' : 'success'">
                    {{ currentDetail.liverFunction || '-' }}
                  </el-tag>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>肾功能：</label>
                  <el-tag :type="currentDetail.renalFunction === '异常' ? 'danger' : 'success'">
                    {{ currentDetail.renalFunction || '-' }}
                  </el-tag>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>心电图：</label>
                  <span>{{ currentDetail.ecgResult || '无记录' }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="section-card">
            <template #header>
              <div class="card-sub-header">其他检查</div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <label>胸片结果：</label>
                  <span>{{ currentDetail.chestXray || '无异常' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>B超结果：</label>
                  <span>{{ currentDetail.ultrasound || '无异常' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>视力（左）：</label>
                  <span>{{ currentDetail.visionLeft || '-' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>视力（右）：</label>
                  <span>{{ currentDetail.visionRight || '-' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>听力测试：</label>
                  <span>{{ currentDetail.hearingTest || '正常' }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="section-card">
            <template #header>
              <div class="card-sub-header">医生建议</div>
            </template>
            <div class="detail-item">
              <div style="white-space: pre-wrap; line-height: 1.6;">
                {{ currentDetail.doctorComment || '暂无医生建议' }}
              </div>
            </div>
            <div class="detail-item" v-if="currentDetail.recommendation">
              <label>健康建议：</label>
              <span style="color: #67C23A;">{{ currentDetail.recommendation }}</span>
            </div>
          </el-card>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import http from '@/utils/http.js'
import { ElMessage } from 'element-plus'
import utils from "@/utils/tools.js";
import dayjs from 'dayjs'

const checkupData = ref([])
const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const loading = ref(false)

const searchForm = reactive({
  startTime: '',
  endTime: ''
})

const searchFormRef = ref()

const detailVisible = ref(false)
const currentDetail = ref({})

onMounted(() => {
  getCheckupList()
})

async function getCheckupList() {
  loading.value = true
  try {
    const params = {
      pageNum: pageInfo.value.pageNum,
      pageSize: pageInfo.value.pageSize,
      elderId: utils.getCurrentUser().id,
      checkStartTime: searchForm.startTime,
      checkEndTime: searchForm.endTime
    }
    const res = await http.get('/checkupRecord/page', { params })
    checkupData.value = res.data.list
    pageInfo.value.total = res.data.total
  } catch (e) {
    console.error('获取体检记录失败:', e)
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

function currentChange(e) {
  pageInfo.value.pageNum = e
  getCheckupList()
}

function sizeChange(e) {
  pageInfo.value.pageSize = e
  getCheckupList()
}

function search() {
  pageInfo.value.pageNum = 1
  getCheckupList()
}

function resetSearch() {
  searchFormRef.value.resetFields()
  searchForm.startTime = ''
  searchForm.endTime = ''
  getCheckupList()
}

const showDetail = (row) => {
  currentDetail.value = row
  detailVisible.value = true
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.section-card {
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.card-sub-header {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  padding: 12px 20px;
  background-color: #f8f9fa;
  border-radius: 4px 4px 0 0;
}

.detail-item {
  margin: 12px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.detail-item label {
  color: #606266;
  min-width: 80px;
  margin-right: 12px;
}
</style> 